<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Adminity - Login</title>
  <link rel="shortcut icon" href="favicon.gif">
  <!---CSS Files-->
  <link rel="stylesheet" href="../static/css/master.css">
  <link rel="stylesheet" href="../static/css/login.css">
  <!---jQuery Files-->
  <script src="../static/js/jquery-1.7.1.min.js"></script>
  <script src="../static/js/jquery.spinner.js"></script>
  <script type="text/javascript" src="../static/js/forms/jquery.validate.min.js"></script>
  <!---Fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
    <!---FadeIn Effect, Validation and Spinner-->
  <script>
    $(document).ready(function () {
       $('div.wrapper').hide();
        $('div.wrapper').fadeIn(1200);
        $('#lg-form').validate();
       //  $('.submit').click(function() {
       //  var $this = $(this);
       //  $this.spinner();
       //  setTimeout(function() {
       //          $this.spinner('remove');
       //  }, 1000);
       // });
    });
  </script>
    <style>
        /*错误提示弹窗*/
        .alert {
            padding: 15px;
            background-color: #f44336;
            color: white;
            display: none;
        }
        /*  正确提示弹窗*/
        .success-alert {
            padding: 15px;
            background-color: #4CAF50;
            color: white;
            display: none;
        }
    </style>
</head>
<body>
<div id="alert" class="alert">

</div>
<div id="successAlert" class="success-alert">

</div>
	<div class="wrapper">
		<div class="logo">
	 	<h1>LOGIN PAGE</h1>
	 </div>
   <div class="lg-body">
     <div class="inner">
       <div id="lg-head">
         <p><span class="font-bold">Adminity</span>: Please login to access the control panel.</p>
         <div class="separator"></div>
       </div>
       <div class="login">
         <form id="lg-form" method="post" action="dashboard.html">
           <fieldset>
              <ul>
                 <li id="usr-field">
                  <input class="input required" name="uname" id="username" type="text" size="26" minlength ="1" placeholder="Username..." />
                 </li>
                 <li id="psw-field">
                  <input class="input required" name="password" id="password" type="password" size="26" minlength="1" placeholder="Password..." />
                 </li>
                 <li class="checkbox">
                  <input class="checkbox" type="checkbox" id="remember-me" value="remember" /> 
                  <label for="remember-me" class="checkbox-text">记住我</label>
                 </li>
                 <li>
                     <input class="submit" type="button" id="btn"/>
                     <div id="result"></div>
                 </li>
              </ul>
           </fieldset>
          </form>
          <span id="lost-psw">
           <a href="#">I forgot my password</a>
          </span>
        </div>
     </div>
    </div>
	</div>
</body>
<script>
    $('#btn').click(function() {
       var username = $('#username').val()
       var  password = $('#password').val()
        $.ajax({
            url: '/login', // 后端控制器路由地址
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({username:username, password:password}),
            success: function (response) {
                console.log(response)
                if (response.code === 200) {
                    if (response.message == "欢迎用户登陆"){
                        var elementById = document.getElementById("successAlert");
                        elementById.textContent = response.message;
                        elementById.style.display = "block";
                        // 设置定时器，3秒后隐藏提示信息并跳转到 "/listUser" 页面
                        setTimeout(function(){
                            document.getElementById("successAlert").style.display = "none";
                            window.location.href = "/";
                        }, 3000);
                    }else{
                        var elementById = document.getElementById("successAlert");
                        elementById.textContent = response.message;
                        elementById.style.display = "block";
                        // 设置定时器，3秒后隐藏提示信息并跳转到 "/listUser" 页面
                        setTimeout(function(){
                            document.getElementById("successAlert").style.display = "none";
                            //进入管理员界面
                            window.location.href = "/toIndex";
                        }, 3000);
                    }
                } else {
                   // $('#result').html('<p>登录失败：' + response.message + '</p >');
                    // $('#result').html('<p>登录失败：' + response.message + '</p>');
                    // 显示提示信息
                    var elementById1 = document.getElementById("alert");
                    elementById1.textContent = "账号密码不正确,请重新输入"
                    elementById1.style.display = "block";
                    // 设置定时器，3秒后隐藏提示信息
                    setTimeout(function(){
                        elementById1.style.display = "none";
                    }, 3000);
                }
            },
            error: function (xhr, status, error) {
                console.log('Error occurred: ' + error);
            }
        });
    });
</script>
</html>